<template>
	<view>
		<view class="from_box">
			<mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
				<mu-form-item prop="input" label="待办">
					<mu-text-field v-model="form.input" @input="onInput"></mu-text-field>
				</mu-form-item>
			</mu-form>
		</view>
		<view style="margin-right: 60rpx;display: flex;justify-content: flex-end;">
			<text class="iconfont icon-hua" style="font-size: 50rpx;color: 	#6495ED;"></text>
		</view>
		<view class="kapian" style="margin-left: 50rpx;margin-right: 50rpx;">
			<view class="content" v-for="(item,index) in list">
				<view><text style="font-size: 28rpx; font-weight: 600;">{{index+1}}:</text> <text style="font-size: 26rpx; font-weight: 400;letter-spacing:1rpx"> {{item.message}}</text></view>
			</view>
		</view>
		<view class="btn">
			<view>
				<mu-button style="margin-left: 70%;margin-top: 5%;" color="#1B9ADC" @click="addList()">添加
				</mu-button>
			</view>
			<view>
				<mu-button style="margin-left: 70%;margin-top: 5%;" color="#1B9ADC" @click="getFormInpText()">保存
				</mu-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "addTodoFrom",
		computed: {
			...mapState(['showAddList', 'todolistFrom', 'indexList'])
		},
		data() {
			return {
				isRadio:true,
				radio:{
					checked:true,
					value:'日记1'
				},
				labelPosition: 'top',
				form: {
					input: '',
					select: '',
					date: '',
					radio: '',
					checkbox: [],
					switch: false,
					slider: 30,
					textarea: ''
				},
				list:[]
			}
		},
		methods: {
			// 控制弹出框
			// ShowAddList() {
			// 	this.$store.commit('setShowAddList', !this.showAddList)
			// },
			// 添加一条数据
			addList() {
				this.onInput();
				var item={
					state:'false',
					message:this.form.input
				}
				console.log(this.form.input);
				this.list.push(item)
			},
			// 保存 并清空
			getFormInpText() {
				this.onInput();
				this.$store.commit('setIndexList',this.list);
				this.list=[];
				this.form.input='';
			},
			// 键盘事件
			onInput() {
				console.log(this.form.input.length);
				if(this.form.input.length<3||this.form.input==='') {
					uni.showToast({
						title:'要做的事太少哦~',
						icon:'none'
					});
					return;
				}
			},
			changeRadio(){
				this.isRadio=!this.isRadio;
			},
			// 单选框
			getRadioData(e){
				this.changeRadio();
				console.log(e);
			}
		},
		components: {
		
		}
	}
</script>

<style lang="less">
	text{
		white-space:pre-wrap;
		 word-break:break-all;
	}
	.from_box {
		width: 90%;
		margin: 10rpx auto;

		.from_box {}

		.kapian {
			.content{
				
			}
		}

		.btn {
			display: flex;
		}
	}
</style>
